<template>
<div style="height:100%">
  <div class="prdlist">
    <el-row>
  <el-col :span="8" v-for="(o, index) in list" :key="o" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }">
      <img src="../../assets/images/youbao/hamburger.png" class="image">
      <div style="padding: 14px;">
        <span>{{o.name}}</span>
        <div class="bottom clearfix">
          <time class="time">{{o.name}}</time>
          <el-button type="text" class="button" @click="dialogVisible = true">购买此保险产品</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
  
  </div>

  <el-dialog
  title="购买提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>你确定是要购买此保险吗？</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="gobuy">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>

export default {
  name: 'addpolicy',
  components: { },
    computed: {
  },
  data() {
    return {
      list:[{id:1,name:'运动险'},{id:2,name:'重疾险'}],
      dialogVisible: false,
      currentPage1:1,
      input5:'',
      select:'',
      radio:1,
      state:'1',
   currentDate: new Date(),


    }
      
  },
  components:{


  },
  mounted(){


  },
  methods:{
    gobuy(){


      this.dialogVisible = false
        window.open('http://chudan.zhiyuewulian.com')
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    gogo(){

    },
    filterTag(){

    },
handleSizeChange(){

},
handleCurrentChange(){
  
},
handleClick(row) {
        console.log(row);
      },
  }
}
</script>

<style lang="scss" scoped>
.prdlist{
  width:90%;
  height: 100%;
}
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 10;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  /deep/ .el-row{
    margin:2%;
  }
/deep/ .el-col-8{
  max-width: 230px;
}
</style>
